<template>
  <div class="main-content">
		<div class="title">中信保诚人寿保险有限公司数据质量检核结果</div>
    <!-- 顶部表单 -->
    <div class="form-common-box">
      <h-form :model="formData" :rules="rules" ref="formData" inline cols="3" :label-width="80">
        <h-form-item label="规则序号" prop="ruleId">
          <h-input v-model="formData.ruleId" placeholder="请输入"></h-input>
        </h-form-item>
        <h-form-item label="期次号" prop="dateTime">
          <h-input v-model="formData.dateTime" placeholder="请输入"></h-input>
        </h-form-item>
        <h-form-item label="表名" prop="tableName">
					<h-input v-model="formData.tableName" placeholder="请输入"></h-input>
        </h-form-item>
        <h-form-item label="数据项" prop="dataName">
					<h-input v-model="formData.dataName" placeholder="请输入"></h-input>
        </h-form-item>
        <h-form-item :label-width="10">
          <h-button style="margin-right:10px;" type="primary" @click="queryData('btn')">查询</h-button>
          <h-button @click="resetData">重置</h-button>
        </h-form-item>
      </h-form>
    </div>
    <!-- table列表 -->
    <div class="table-operate-box">
      <!-- 按钮 -->
      <div :class="['top-btn']">
				<h-button @click="exportExcel" type="ghost" class="btn">导出</h-button>
      </div>
      <!-- 列表 -->
			<hui-table
				:currentTablePage="currentTablePage"
				@tablePageChange="tablePageChange"
				@pageSizeChange="pageSizeChange"
				@selectionChange="selectionChange"
				:tableConfig="tableConfig"
			></hui-table>
    </div>
  </div>
</template>

<script>
import HuiTable from '@/components/hui-table.vue'

const { log } = console //打印输出

export default {
  name: 'proInforMain',
  components: { HuiTable},
  data() {
    return {
      currentTablePage: {
        total: 0,
        size: 10, //	页面大小
        current: 1 //	当前页码
      },
      formData: {
        count: '',
				dataName: '',
				dateTime: '',
				endDateTime: '',
				endFlow: '',
				errorCount: '',
				errorRate: '',
				errorRemark: '',
				ruleId: '',
				ruleType: '',
				startDateTime: '',
				startFlow: '',
				tableName: '',
				verifyRule: ''
      },
      tableConfig: {
        columnsData: [
          {
            title: '检核规则序号',
            ellipsis: true,
            key: 'ruleId',
            width: 110
          },
					{
            title: '数据期次',
            ellipsis: true,
            key: 'dateTime',
            width: 110
          },
          {
            title: '本次报送起始流水号',
            key: 'startFlow',
            ellipsis: true,
						width: 200
          },
					{
            title: '本次报送结束流水号',
            key: 'endFlow',
            ellipsis: true,
						width: 200
          },
          {
            title: '检核规则类型',
            key: 'ruleType',
            ellipsis: true,
						width: 160
          },
          {
            title: '表名',
            ellipsis: true,
            key: 'tableName',
						width: 140
          },
          {
            title: '数据项名称',
            key: 'dataName',
            ellipsis: true,
						width: 120
          },
					{
            title: '校验规则',
            key: 'verifyRule',
            ellipsis: true,
						width: 260
          },
					{
            title: '错误条数',
            key: 'errorCount',
            ellipsis: true,
						width: 120
          },
					{
            title: '总量',
            key: 'count',
            ellipsis: true,
          },
					{
            title: '错误率',
            key: 'errorRate',
            ellipsis: true,
          },
					{
            title: '错误数据原因解释',
            key: 'errorRemark',
            ellipsis: true,
						width: 200
          }
        ],
        tableData: []
      },
      rules: {},
			tSelectedAry: []
    }
  },
  mounted() {
	},
  created() {
		this.queryData()
  },
  methods: {
		selectionChange(selection) {
			this.tSelectedAry = selection
		},
    queryData() {
      let param = this.formData
      //发送请求
			this.$usePost(this.$url.queryCheckList, param).then(res => {
        // //给page赋值
        this.currentTablePage = { size: 1, total: res.data.length, current: 1 }
        this.tableConfig.tableData = res.data
      })
    },
    resetData() {
      this.$refs.formData.resetFields()
    },
    // 页码改变-----开始
    tablePageChange(i) {
      this.currentTablePage.current = i.current
      this.queryData()
    },
    pageSizeChange(val) {
      this.currentTablePage.size = val.size
      this.queryData()
    },
    exportExcel() {
			let params = this.formData
			this.$service(
				{
					url: this.$url.exportCheckListReport,
					method: "POST",
					responseType: "blob",
					data: params
				}
			).then((res) => {
				const { data, headers } = res
				const fileName = headers['content-disposition'].split("filename=")[1]
				// 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理
				const blob = new Blob([data])
				let dom = document.createElement("a")
				let url = window.URL.createObjectURL(blob)
				dom.href = url
				dom.download = fileName //下载后文件名
				dom.style.display = "none"
				document.body.appendChild(dom)
				dom.click()
				dom.parentNode.removeChild(dom)
				window.URL.revokeObjectURL(url)
			})
    }
  }
}
</script>

<style lang='scss' scoped>
.title{
	font-size: 24px;
	text-align: center;
	margin-bottom: 30px;
	font-weight: bold;
}
</style>
